<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/header.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/info.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/lib/font/iconfont.css">
    <link rel="stylesheet" href="/lib/swiper/swiper.css">
</head>
<body>
    <div id="header" style="z-index: 9999;"></div>
    <!-- 轮播 -->
    <div id="banner">
         <div class="swiper-container">
            <div class="swiper-wrapper index_BannerswiperWrapper">
                <!-- <div class="swiper-slide">
                    <a href="#">
                        <img src="/images/banner.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide index_swiperVideo">
                    <a href="#">
                        <img src="/images/banner2.jpg" alt="">
                    </a>
                </div> -->
            </div>
            <!-- 定义图片模板 -->
            <script type="text/html" id="indexBannerTemplate">
                {{each list item}}
                <div class="swiper-slide">
                    <a href="#">
                        <img src="{{item.url}}" alt="">
                    </a>
                </div>
                {{/each}}
            </script>



            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>

    <!-- 内容 -->
    <div id="section-1">
        <div class="section-1-wrap">
            <div class="main">
                <h2>男士一生仅能定制一枚</h2>
                <p>
                    DR求婚钻戒，男士凭身份证一生仅能定制一枚
                    <br>
                    寓意“一生 • 唯一 • 真爱”
                </p>
                <div>
                    <input type="search" placeholder="输入身份证号，查看真爱承诺">
                    <i class="iconfont icon-iconzhuanqu20"></i>
                </div>
            </div>
        </div>
    </div>

    <div id="section-2">
        <div class="section-2-wrap">
            <div class="main">
                <video src="./video/index-section-2.mp4" autoplay muted loop></video>
                <div class="right">
                    <h2>签署真爱协议，承诺此生真爱不变</h2>
                    <div class="line"></div>
                    <p>
                        购买DR钻戒前双方需签订真爱协议
                        <br>
                        签下名字，承诺终生不可更改
                        <br>
                        
                        每一枚DR钻戒绑定唯一真爱编码
                        <br>
                        
                        全球均可进行真爱查询
                    </p>
                    <span>立即咨询</span>
                </div>
            </div>
        </div>
    </div>

    <div id="section-3">
        <div class="section-3-wrap">
            <div class="main-l">
                <h2>他们用DR承诺挚爱唯一</h2>
                <div></div>
                <p>
                    收到DR的女孩都拥有幸福的爱情
                    <br>
                    用一生爱一人
                </p>
                <a href="#">试戴同款</a>
            </div>
            <div class="main-r">
                <a href="#">
                     <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                        <!-- <div class="swiper-slide"><img src="./images/section-3_1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/section-3_2.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/section-3_3.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/section-3_4.jpg" alt=""></div> -->
                        </div>
                        <!-- 定义模板 -->
                        <script type="text/html" id="sextion-3Template">
                            {{each data item}}
                            <div class="swiper-slide"><img src="{{item.url}}" alt=""></div>
                            {{/each}}
                        </script>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </a>
            </div>
        </div>
    </div>

    <div id="section-4">
        <div class="section-4-wrap">
            <div class="main-l">
                <h2>
                    全球300家DR真爱体验店
                    <br>
                    VIP浪漫服务
                </h2>
                <div class="line"></div>
                <a href="#">查看更多门店，预约试戴</a>
                <div class="dinwei">
                    <i class="iconfont icon-Frame1-copy"></i>
                    <!-- <span>北京</span> -->
                    <!-- <p>1 / 3</p> -->
                </div>
            </div>
            <div class="main-r">
                <a href="#">
                     <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./images/section-4_1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/section-4_2.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/section-4_3.jpg" alt=""></div>
                        </div>  
                    </div>
                    <span class="dw">北京</span>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </a>
            </div>
        </div>
    </div>

    <div id="section-5">
        <div class="section-5_wrap">
            <div class="title">
                <h2>陪伴你一生的真爱承诺</h2>
                <div class="line"></div>
            </div>
            <div class="main">
                 <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="">
                            <img src="./images/section-5_1.jpg" alt="">
                            <div class="wenzi">
                                <h3>结婚对戒</h3>
                                <p>
                                    JUST YOU系列
                                    <br>
                                    满天星 结婚对戒
                                </p>
                            </div>
                        </a> 
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/section-5_2.jpg" alt="">
                            <div class="wenzi">
                                <h3>结婚对戒</h3>
                                <p>
                                    JUST YOU系列
                                    <br>
                                    满天星 结婚对戒
                                </p>
                            </div>
                        </a>
                </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/section-5_3.jpg" alt="">
                            <div class="wenzi">
                                <h3>结婚对戒</h3>
                                <p>
                                    JUST YOU系列
                                    <br>
                                    满天星 结婚对戒
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/section-5_4.jpg" alt="">
                            <div class="wenzi">
                                <h3>结婚对戒</h3>
                                <p>
                                    JUST YOU系列
                                    <br>
                                    满天星 结婚对戒
                                </p>
                            </div>
                        </a>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="section-6">
        <div class="section-6_wrap">
            <div class="title">
                <h2>陪伴你一生的真爱承诺</h2>
                <div class="line"></div>
                <a href="#">更多甄选系列</a>
            </div>
            <div class="main">
                <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#"><img src="./images/section-6_1.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./images/section-6_2.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./images/section-6_3.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./images/section-6_4.jpg" alt=""></a>
                    </div>
                    </div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>

    <div id="info"></div>
    <div id="footer"></div>


    <div id="footerFixed">
        
        恭喜
        <strong>王</strong>
        先生和
        <strong>杨</strong>
        女士用DR求婚钻戒许下一生唯一真爱承诺，开启DR真爱之旅！
    </div>


    <script src="/lib/requirejs/require.js" data-main="/js/index"></script>
    <!-- <script src="/lib/swiper/swiper.js"></script>
    <script src="/js/index.js"></script>
    <script src="/lib/jquery/jquery.js"></script>
    <script>
        window.onload = function() {
        var footer = document.querySelector('#footer');
        var h = window.innerHeight * 0.08;
        footer.style.paddingBottom = h + 'px';
        }

        $('#header').load('/html/header.html')
        $('#info').load('/html/info.html')
        $('#footer').load('/html/footer.html')

    </script> -->
</body>
</html>